<template>
    <div style="background-color: #f8f8ff;">
      <div>
        <el-row :gutter="5">
          <el-col :span="16">
            <div class="grid-content ep-bg-purple" >
              <el-carousel
                  height="450px"
                  direction="vertical"
                  motion-blur>
                <el-carousel-item  v-for="imgadv in data.imgadvlist" :key="imgadv.id" >
                  <el-image @click="router.push(imgadv.url)" :src="imgadv.fileimg" style="width: 100%;height: 100%;"/>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>

          <el-col :span="8"><div class="grid-content ep-bg-purple" >
            <div class="card" style="height: 450px;padding: 0;">
                <div style="display: flex;height: 50px;align-items: center">
                  <div style="flex: 1;font-size: 17px;padding-left: 15px;font-weight: bold;color: #fc9002">最新公告</div>
                  <div style="flex: 1"></div>
                  <div style="flex: 1;font-size: 15px;padding-right: 15px;text-align: right;color: #fc9002;;cursor: pointer" @click="router.push('/front/newslist')">查看更多 <el-icon><ArrowRight /></el-icon></div>
                </div>
              <el-divider border-style="dashed" style="margin: 0"/>
                <div style="margin-top: 30px;">
                  <el-timeline >
                    <template v-for="(news, i) in data.newslist" :key="news.id" >
                    <el-timeline-item :timestamp="news.savetime"  v-if="i<5">
                     <div class="text-overflow" >
                       <el-tooltip :content="news.title" placement="top" :enterable="false">
                         <a href="javascript:void(0)" @click="router.push('/front/newsDateil?id='+news.id)">{{ news.title }}</a>
                       </el-tooltip>
                     </div>
                    </el-timeline-item>
                    </template>
                  </el-timeline>

                </div>
            </div>
          </div>
          </el-col>
        </el-row>
      </div>

      <div style="width: 90%;margin: 20px auto;">
        <el-row :gutter="10">
          <el-col :span="18"><div class="grid-content ep-bg-purple" >
            <div class="card" style="min-height: 580px;padding: 0;">
              <div style="display: flex;height: 50px;align-items: center">
                <div style="flex: 1;font-size: 17px;;padding-left: 15px;font-weight: bold;color: #fc9002">菜品信息推荐</div>
                <div style="flex: 1"></div>
                <div style="flex: 1;font-size: 15px;padding-right: 15px;text-align: right;cursor: pointer;color: #fc9002" @click="router.push('/front/goodslist')">查看更多 <el-icon><ArrowRight /></el-icon></div>
              </div>
              <el-divider border-style="dashed" style="margin: 0"/>
              <div style="margin: 15px 15px;">
                <el-row :gutter="5">
                  <el-col :span="6" v-for="(goods,i) in data.goodslist" v-show="i<8" :key="goods.id">
                    <div class="grid-content ep-bg-purple" style="margin-bottom: 15px;">
                      <el-card shadow="never" style="">
                        <img :src="goods.fileimg" @click="router.push('/front/goodsDateil?id='+goods.id)" style="width: 100%;height: 200px;border-radius: 10px;">
                        <div style="text-align: left;padding: 5px 5px;" >
                      <span >
                      <b style="color: #ff0808">
                      <template v-if="goods.tjprice>0">
                        <span class="strike">￥{{goods.price}}</span>
                        <span style="margin-left: 10px">￥{{goods.tjprice}}</span>
                      </template>
                      <template v-else>
                        <span>￥{{goods.price}}</span>
                      </template>
                    </b>
                      </span>
                          | <el-tag type="danger">{{ goods.typename }}</el-tag>
                          | <el-tag type="warning">{{ goods.catename }}</el-tag>
                          <p style="margin-bottom: 5px;"> {{goods.name}}</p>
                        </div>

                      </el-card>
                    </div>
                  </el-col>
                </el-row>

              </div>
            </div>
          </div>
          </el-col>

          <el-col :span="6"><div class="grid-content ep-bg-purple" >
            <div class="card" style="min-height: 672px;padding: 0;">
              <div style="display: flex;height: 50px;align-items: center">
                <div style="flex: 1;font-size: 17px;padding-left: 15px;font-weight: bold;color: #fc9002">评分榜</div>
                <div style="flex: 1"></div>
              </div>
              <el-divider border-style="dashed" style="margin: 0"/>
              <div style="margin: 15px 15px;">
                <div v-for="(item, x) in data.evlist" :key="item.id" v-show="x<6" >

                  <div style="display: flex;margin-top: 15px;">
                    <div>
                      <img :src="item.goods.fileimg" @click="router.push('/front/goodsDateil?id='+item.goodsid)" style="width: 80px;height: 80px;border-radius: 10px;">
                    </div>
                    <div style="padding-left: 15px;line-height: 1;text-align: left">
                      <div class="overflowShow" >
                        <a href="javascript:void (0)" @click="router.push('/front/goodsDateil?id='+item.goodsid)" style="text-decoration: none;color: #545c64">
                          <strong > <el-tag type="success">{{item.goods.typename}} </el-tag> {{item.goods.name}}</strong>
                        </a>
                      </div>
                      <p style="color: #888888FF;margin: 7px 0"> <el-tag type="danger" :effect="'dark'"> <b>{{item.pfnum}} 分</b> </el-tag>  </p>
                      <span style="padding-top: 2px;">
                      <b style="color: #ff5000">
                      <template v-if="item.goods.tjprice>0">
                        <span class="strike">￥{{item.goods.price}}</span>
                        <span style="margin-left: 10px">￥{{item.goods.tjprice}}</span>
                      </template>
                      <template v-else>
                        <span>￥{{item.goods.price}}</span>
                      </template>
                    </b>
                      </span>
                    </div>
                  </div>
                  <div style="border-top: 1px dashed #eee"></div>
                </div>

              </div>
            </div>
          </div></el-col>
        </el-row>
      </div>
    </div>
</template>

<script setup>
import {onUnmounted, reactive, ref} from "vue";
//import router from "@/router/index.js";
import request from "@/utils/request.js";
import qs from "qs";
import {useRouter} from "vue-router";
import {listenMsg} from "@/utils/crossTagMsg.js";
import {ArrowRight} from "@element-plus/icons-vue";
const router = useRouter()
const data = reactive({
  key:'',
  key1:'',
  imgadvlist:[],
  newslist:[],
  catelist:[],
  goodslist:[],
  evlist:[],
  about:{}
})
const cancelListen = listenMsg(msginfo=>{
  if (msginfo.type==='轮播图更新' || msginfo.type==='新闻更新' || msginfo.type==='goods更新'  || msginfo.type==='分类更新'){
    getindex()
  }
})
onUnmounted(cancelListen)


//首页信息查询
const getindex =()=>{
  request.post('index', qs.stringify({
    key:data.key,
    key1:data.key1,
    istj:'是',
  })).then(res => {
    data.goodslist = res.data.goodsList
    data.imgadvlist = res.data.imglist
    data.newslist = res.data.nlist
    data.catelist = res.data.cateList
    data.evlist = res.data.evList
  })
}
getindex()
</script>

<style scoped>
.text-overflow {
  width: 400px; /* 设置一个固定的宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

</style>
